import React from 'react'
import _ from 'underscore'

import View from 'lib/View.jsx'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx'
import Card from 'lib/components/card.jsx'
import CardSpec from '../common/CardSpec.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'

import CrashNameGrid2 from './CrashNameGrid2.jsx'
import TraceScope from './TraceScope.es6'

var crashNameCols = CrashNameGrid2.defaultProps.cols.filter((col) => (col.key !== 'affected' && col.key !=='appVersion'))

var jsErrorCols = [
  {
    title:'名称',
    key:'jsUrl',
    render:function(fmtVal,rowData){
      return (
        <a href={BlueWare.pageUrlPrefix+'/app/'+BlueWare.appId+'/pageload'+'#/jserror/traces/'+rowData.id}>{fmtVal}</a>
      )
    }
  },
  {
    title:'错误信息',
    key:'errMsg',
    sortable:true
  },
  {
    title:'首次发生时间',
    width:100,
    key:'firstTime',
    sortable:true,
    formatter:format.stampToTime
  },
  {
    title:'最后发生时间',
    width:100,
    key:'lastTime',
    sortable:true,
    formatter:format.stampToTime
  },
  {
    title:'发生次数',
    sortable:true,
    key:'errCount'
  },
  // {
  //   title:'影响设备数',
  //   sortable:true,
  //   key:'deviceNum'
  // }
]

export default class TraceView extends View{
  renderBasic(trace) {
    return (
      <div className="pure-g">
        <div className="pure-u-1">
          <div className="box">
            <Card>
              <div className="pure-g">
                {
                  BlueWare.isAndroid?(
                    <div className="pure-u-1 pure-u-lg-1-3">
                      APP使用次数：
                      {trace.appUsedCount}
                    </div>
                  ):null
                }
                <div className="pure-u-1 pure-u-lg-1-3">
                  设备：
                  {trace.manufacturerName + ' ' + trace.modelName}
                </div>
                <div className="pure-u-1 pure-u-lg-1-3">
                  操作系统：
                  {trace.osName + ' ' + trace.osVersionName}
                </div>
                <div className="pure-u-1 pure-u-lg-1-3">
                  发生问题次数：
                  {trace.errorCount}
                </div>
                <div className="pure-u-1 pure-u-lg-1-3">
                  APP版本：
                  {trace.appVersionName}
                </div>
                <div className="pure-u-1 pure-u-lg-1-3">
                  所在地域：
                  {trace.area}
                </div>
                {
                  trace.lastAppUseTime?(
                    <div className="pure-u-1 pure-u-lg-1-3">
                      最近一次使用APP时间：
                      {format.stampToTime(trace.lastAppUseTime)}
                    </div>
                  ):null
                }
              </div>
            </Card>
          </div>
        </div>
      </div>
    )
  } // renderBasic

  renderCrashBody() {
    return (
      <div className="pure-g">
        <div className="pure-u-1">
          <div className="box">
            <Card title="崩溃轨迹">
              {/*<CrashNameGrid2 store={this.state.grid} cols={crashNameCols}/>*/}
              <CrashNameGrid2 store={this.state.crashGrid} cols={crashNameCols}/>
            </Card>
          </div>
        </div>
      </div>
    )
  }

  renderJsErrorBody() {
    return (
      <div className="pure-g">
        <div className="pure-u-1">
          <div className="box">
            <Card title="JS 错误">
              {/*<GridWidget store={this.state.grid} cols={jsErrorCols}/>*/}
              <GridWidget store={this.state.jsErrorGrid} cols={jsErrorCols}/>
            </Card>
          </div>
        </div>
      </div>
    )
  }

  renderAjaxBody(dataType) {
    let gridTitle = dataType.toLowerCase()==='ajaxerror'?'Ajax 错误':'Ajax 慢请求'
    return (
      <div className="pure-g">
        <div className="pure-u-1">
          <div className="box">
            <Card title={gridTitle}>
              {/*<GridWidget store={this.state.grid} cols={this.state.ajaxCols}/>*/}
              <GridWidget store={this.state.ajaxGrid} cols={this.state.ajaxCols}/>
            </Card>
          </div>
        </div>
      </div>
    )
  }

  renderBody() {
    var traceType = this.state.traceType;
    var dataType = this.state.dataType;
    if (traceType==='crashlog') {
      return this.renderCrashBody();
    }
    if (traceType==='webview'&&dataType==='jsError') {
      return this.renderJsErrorBody();
    }
    if ((traceType==='webview'&&dataType==='ajaxError') ||
      (traceType==='webview'&&dataType==='ajaxTrace')) {
      return this.renderAjaxBody(dataType);
    }
  }

  renderExtra() {
    return (
      this.state.extraDatas&&this.state.extraDatas.customData?(
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <CardSpec title="附加信息" useToggle={true}>
                <table className="table table-striped">
                  <tbody>
                    <tr>
                      <th>
                        序号
                      </th>
                      <th>
                        类型
                      </th>
                      <th>
                        描述
                      </th>
                    </tr>
                    {
                      _(this.state.extraDatas.customData).chain().map((value,key) => {
                        return {
                          key:key,
                          value:value
                        }
                      }).map((item,indx) => {
                        return (
                          <tr key={item.key}>
                            <td>{indx+1}</td>
                            <td>{item.key}</td>
                            <td>{item.value}</td>
                          </tr>
                        )
                      }).value()
                    }
                  </tbody>
                </table>
              </CardSpec>
            </div>
          </div>
        </div>
      ):null
    )
  } // renderExtra

  render(){
    return (
      <div className="float-position-absolute">
        <div className="widget-float">
          <div className="widget-title">
          <a className="close iconfont" href="javascript:;" onClick={ this.props.history.goBack }>&#xe638;</a>
            {decodeURIComponent(this.props.routeParams.userIdentifier)}
            {this.state.titleSuffix}
          </div>
          <div className="widget-content">
            {/*{this.state.trace?this.renderDetail(this.state.trace):<DefaultLoadingElement />}*/}
            {
              this.state.trace ?
              <div>
              {this.renderBasic(this.state.trace)}
              {this.renderBody()}
              {this.renderExtra()}
              </div> :
              <DefaultLoadingElement />
            }
          </div>
        </div>
      </div>
    )
  }

}
TraceView.defaultProps = {
  Scope:TraceScope
}
